import React, { useEffect } from 'react';
import { connect } from 'react-redux';

import {getRankList} from "./store";
import { filterIndex } from '../../api/utils';
import {
  List,
  ListItem,
  SongList,
  Container
} from './style';
import Scroll from '../../baseUI/scroll/index';
import { EnterLoading } from './../Singers/style';
import { renderRoutes } from 'react-router-config';
import Loading from '../../baseUI/loading';

function Rank (props) {
  const { rankList:list, loading } = props;
  const { getRankListDataDispatch } = props;

  const rankList = list ? list.toJS () : [];

  /*
    排行榜单分为两个部分,一部分是官方榜,另一部分是全球榜。
    官方榜单数据有 tracks 数组,存放部分歌曲信息,而全球榜没有。
    但是后端数据并没有将这两者分开,因此我们需要做一下数据的处理。
  */
  const globalStartIndex = filterIndex (rankList);
  const officialList = rankList.slice (0, globalStartIndex);
  const globalList = rankList.slice (globalStartIndex);

  const enterDetail = (detail) => {
    props.history.push(`/rank/${detail.id}`)
  }

  useEffect (() => {
    getRankListDataDispatch ();
  }, []);


  // 官方榜 renderRankList (officialList)
  // 全球榜 renderRankList (globalList, true)
  // 这是渲染榜单列表函数,传入 global 变量来区分不同的布局方式
  const renderRankList = (list, global) => {
    return (
      <List globalRank={global}>
        {
          list.map((item) => {
            return (
              <ListItem key={item.coverImgId} tracks={item.tracks}
                        onClick={() => enterDetail(item)}>
                <div className="img_wrapper">
                  <img src={item.coverImgUrl} alt=""/>
                  <div className="decorate"></div>
                  <span className="update_frequecy">{item.updateFrequency}</span>
                </div>
                {renderSongList(item.tracks)}
              </ListItem>
            )
          })
        }
      </List>
    )
  };

  const renderSongList = (list) => {
    return list.length ? (
      <SongList>
        {
          list.map((item, index) => {
            return <li key={index}>{index + 1}. {item.first} - {item.second}</li>
          })
        }
      </SongList>
    ) : null;
  };

  // 榜单数据未加载出来之前都给隐藏
  const displayStyle = loading ? {"display":"none"}:  {"display": ""};

  return (
    <Container>
      <Scroll>
        <div>
          <h1 className="offical" style={displayStyle}> 官方榜 </h1>
          { renderRankList (officialList) }
          <h1 className="global" style={displayStyle}> 全球榜 </h1>
          { renderRankList (globalList, true) }
          { loading ? <EnterLoading><Loading></Loading></EnterLoading> : null }
        </div>
      </Scroll>
      {renderRoutes (props.route.routes)}
    </Container>
  );
}

// 映射 Redux 全局的 state 到组件的 props 上
const mapStateToProps = (state) => ({
  rankList: state.getIn (['rank', 'rankList']),
  loading: state.getIn (['rank', 'loading']),
});
// 映射 dispatch 到 props 上
const mapDispatchToProps = (dispatch) => {
  return {
    getRankListDataDispatch () {
      dispatch (getRankList ());
    }
  }
};

export default connect (mapStateToProps, mapDispatchToProps)(React.memo (Rank));
